<template>
    <div  >
      <van-action-sheet position="bottom" :style="{bottom: '50px'}" :close-on-click-overlay="false" v-model="show" >
        <slot name="title">
          <van-grid :border="false" :column-num="3">
            <van-grid-item @click="show = !show" style="border-bottom: 1px solid #c8c7cc">
              取消
<!--              <van-image style="width: 3vw;height: 3vw" :src="require('../assets/关闭@2x.png')"></van-image>-->
            </van-grid-item>
            <van-grid-item style="border-bottom: 1px solid #c8c7cc" :text="thisTime" />
            <van-grid-item class="define" @click="queDing" style="border-bottom: 1px solid #c8c7cc" >
              确定
<!--              <van-image style="width: 4vw;height: 3vw" :src="require('../assets/确定@2x.png')"></van-image>-->
            </van-grid-item>
            <van-grid-item></van-grid-item>
            <van-grid-item :text="numText" :class="{text: showColor, textNull: !showColor}"/>
            <van-grid-item  :text="unitMsg"></van-grid-item>
          </van-grid>
        </slot>
        <div class="content">
          <van-grid :clickable="true" :border="false" :column-num="3" class="keyboard">
            <van-grid-item @click="numBer($event)"  style="width: 33vw;height: 13vw;" v-for="value in 9" :key="value"  >
              <slot name="text">{{value}}</slot>
            </van-grid-item>
            <van-grid-item  @click="numBer($event)" class="keyback">.</van-grid-item>
            <van-grid-item  @click="numBer($event)">0</van-grid-item>
            <van-grid-item @click="deleNum" class="keyback"> <van-image style="width: 4vw;height: 4vw" :src="require('../../assets/删除@2x.png')"/></van-grid-item>
          </van-grid>
<!--          <div  style="color:#1DA3F2;height: 13vw;line-height: 13vw;font-size: 4vw;margin: 0 auto;text-align: center">记录更多数据</div>-->
        </div>
      </van-action-sheet>

      <van-action-sheet position="bottom" :style="{bottom: '50px'}" :close-on-click-overlay="false" v-model="xieGang"  >
        <slot name="title">
          <van-grid :border="false" :column-num="3">
            <van-grid-item @click="xieGang = !xieGang" style="border-bottom: 1px solid #c8c7cc">
              取消
<!--              <van-image style="width: 3vw;height: 3vw" :src="require('../assets/关闭@2x.png')"></van-image>-->
            </van-grid-item >
            <van-grid-item  :text="thisTime" style="border-bottom: 1px solid #c8c7cc"/>
            <van-grid-item class="define" @click="queDing"  style="border-bottom: 1px solid #c8c7cc">
              确定
<!--              <van-image style="width: 4vw;height: 3vw" :src="require('../assets/确定@2x.png')"></van-image>-->
            </van-grid-item>
            <van-grid-item></van-grid-item>
            <van-grid-item style="display: flex;justify-content: space-around;flex-direction: row"  >
<!--            <van-grid-item    :text="numText" :class="{text: xieGangText, textNull: !xieGangText}" >-->
              <input :class="{inputText: xieGangColor, textNull: !xieGangColor}"
                     ref="refInput"
                     @focus="inputLeft()"
                     v-model="inputLeftText"
                     class="inputText"
                     style="margin-right: 1.5vw;"
                     autofocus
                     type="number"
              />
              <span style="font-size: 5vw;color: black">/</span>
              <input :class="{inputText: xieGangColor, textNull: !xieGangColor}"
                     @focus="inputRight()"
                     class="inputText"
                     ref="refRightInput"
                     v-model="inputRightText"
                     style="margin-left: 1.5vw;"
                     type="number"/>
            </van-grid-item>
            <van-grid-item :text="unitMsg" class="unitClass"></van-grid-item>
          </van-grid>
        </slot>
        <div class="content">
          <van-grid :clickable="true" :border="false" :column-num="3" class="keyboard">
            <van-grid-item   @click="numBer($event)"  style="width: 33vw;height: 13vw;" v-for="value in 9" :key="value"  >
              <slot name="text">{{value}}</slot>
            </van-grid-item>
            <van-grid-item class="keyback"></van-grid-item>
            <van-grid-item  @click="numBer($event)">0</van-grid-item>
            <van-grid-item @click="deleNum" class="keyback"> <van-image style="width: 4vw;height: 4vw" :src="require('../../assets/删除@2x.png')"/></van-grid-item>
          </van-grid>
        </div>
      </van-action-sheet>

      <van-action-sheet position="bottom" :style="{bottom: '50px'}" :close-on-click-overlay="false" v-model="kongBai" >
        <slot name="title">
          <van-grid :border="false" :column-num="3">
            <van-grid-item @click="kongBai = !kongBai" style="border-bottom: 1px solid #c8c7cc">
              取消
            </van-grid-item>
            <van-grid-item style="border-bottom: 1px solid #c8c7cc" :text="thisTime" />
            <van-grid-item class="define" @click="queDing"  style="border-bottom: 1px solid #c8c7cc">
              确定
            </van-grid-item>
            <van-grid-item></van-grid-item>
            <van-grid-item :text="numText"  :class="{text: kongBaiColor, textNull: !kongBaiColor}">
            </van-grid-item>
            <van-grid-item :text="unitMsg"></van-grid-item>
          </van-grid>
        </slot>
        <div class="content">
          <van-grid :clickable="true" :border="false" :column-num="3" class="keyboard">
            <van-grid-item   @click="numBer($event)"  style="width: 33vw;height: 13vw;" v-for="value in 9" :key="value"  >
              <slot name="text">{{value}}</slot>
            </van-grid-item>
            <van-grid-item  @click="numBer($event)" class="keyback"></van-grid-item>
            <van-grid-item  @click="numBer($event)">0</van-grid-item>
            <van-grid-item @click="deleNum" class="keyback"> <van-image style="width: 4vw;height: 4vw" :src="require('../../assets/删除@2x.png')"/></van-grid-item>
          </van-grid>
        </div>
      </van-action-sheet>
    </div>
</template>

<script>
import {Toast} from 'vant'
// import $ from 'jquery'
export default {
  name: 'JianPan',
  props: {
    unitMsg: String,
    idMsg: Number
  },
  data () {
    return {
      typeid: '',
      show: false,
      xieGang: false,
      kongBai: false,
      kongBaiColor: true,
      xieGangColor: true,
      showColor: true,
      num: [],
      inputLeftNum: [], // 存储血压左边数据数组
      inputRightNum: [], // 存储血压右边数据数组
      numText: '',
      NoText: '',
      thisTime: '',
      oldId: '',
      flag: 1,
      inputLeftText: '0', // 血压左边值
      inputRightText: '0' // 血压右边值
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 血压左边输入框 焦点事件
    inputLeft () {
      this.flag = 1
      this.$refs.refInput.focus()
      this.$refs.refInput.setAttribute('readonly', 'readonly')
    },
    // 血压右边输入框 焦点事件
    inputRight () {
      this.flag = 2
      this.$refs.refRightInput.focus()
      this.$refs.refRightInput.setAttribute('readonly', 'readonly')
    },
    block () {
      this.show = true
      this.num = []
      this.numText = this.NoText
      if (parseInt(this.numText) === 0) {
        this.showColor = false
      } else if (this.numText.length > 0) {
        this.showColor = true
      }
    },
    xie () {
      this.xieGang = true
      this.inputLeftNum = []
      this.inputRightNum = []
      this.inputLeftText = this.NoText
      this.inputRightText = this.NoText
      this.flag = 1
      this.num = []
      this.numText = this.NoText
      if (parseInt(this.numText) === 0) {
        this.xieGangColor = false
      } else if (this.numText.length > 0) {
        this.xieGangColor = true
      }
    },
    kong () {
      this.kongBai = true
      this.num = []
      this.numText = this.NoText
      if (parseInt(this.numText) === 0) {
        this.kongBaiColor = false
      } else if (this.numText.length > 0) {
        this.kongBaiColor = true
      }
    },
    // 键盘输入数字操作
    numBer (event) {
      // this.num.push(event.currentTarget.innerText)
      this.numText = ''
      this.inputLeftText = ''
      this.inputRightText = ''
      if (this.xieGang === true && this.flag === 1) {
        this.inputLeft()
        this.inputLeftNum.push(event.currentTarget.innerText)
        var XYtext = ''
        for (var t = 0; t < this.inputLeftNum.length; t++) {
          XYtext += this.inputLeftNum[t]
          if (XYtext <= 200 && XYtext > 0) {
            console.log(t)
            this.inputLeftText = XYtext
          } else {
            this.inputLeftNum.splice(t, 1)
          }
        }
        // // 血压右边值
        for (var s = 0; s < this.inputRightNum.length; s++) {
          this.inputRightText += this.inputRightNum[s]
        }
      } else if (this.xieGang === true && this.flag === 2) {
        // 如果flag = 2, 血压右边的框获取焦点
        // 血压左边值
        for (var q = 0; q < this.inputLeftNum.length; q++) {
          this.inputLeftText += this.inputLeftNum[q]
        }
        this.inputRight()
        this.inputRightNum.push(event.currentTarget.innerText)
        // 血压右边值
        var XYRtext = ''
        for (var f = 0; f < this.inputRightNum.length; f++) {
          XYRtext += this.inputRightNum[f]
          if (XYRtext <= 130 && XYRtext > 0) {
            this.inputRightText = XYRtext
          } else {
            this.inputRightNum.splice(f, 1)
          }
        }
      }
      if (this.xieGang === false) {
        this.num.push(event.currentTarget.innerText)
        var showtext = ''
        for (var g = 0; g < this.num.length; g++) {
          showtext += this.num[g]
          if (showtext <= 1000 && Number(this.typeid) === 1) {
            this.numText = showtext
          } else if (showtext <= 24 && Number(this.typeid) === 2) {
            this.numText = showtext
          } else if (showtext <= 40 && Number(this.typeid) === 4) {
            this.numText = showtext
          } else if (showtext <= 100 && Number(this.typeid) === 5) {
            this.numText = showtext
          } else if (showtext <= 200 && Number(this.typeid) === 6) {
            this.numText = showtext
          } else {
            this.num.splice(g, 1)
          }
        }
      } else if (this.num[0] === '.') { // 如果输入以 . 开头输入格式错误
        this.num.push(event.currentTarget.innerText)
        this.num = []
        this.numText = ''
        Toast('数据格式错误')
      }
      if (this.num.length > 0 || this.inputLeftNum.length > 0 || this.inputRightNum.length > 0) {
        this.kongBaiColor = true
        this.xieGangColor = true
        this.showColor = true
      } else if (this.num.length > 6) {
        // this.num = this.num
      }
    },
    // 键盘 确定操作
    queDing () {
      if (this.idMsg === 1) {
        this.kongBai = false
      } else if (this.idMsg === 2) {
        this.show = false
      } else if (this.idMsg === 3 && this.inputLeftText.length > 0 && this.inputRightText.length > 0) {
        this.numText = this.inputLeftText + '/' + this.inputRightText
        this.xieGang = false
        this.flag = 1
      } else if (this.idMsg === 4) {
        this.kongBai = false
      } else if (this.idMsg === 5) {
        this.kongBai = false
      } else if (this.idMsg === 6) {
        this.show = false
      } else {
        Toast('数据格式错误')
        return false
      }
      this.$emit('run', this.numText, this.thisTime)
      this.$emit('numMsg', this.numText, this.thisTime, this.oldId)
      this.kongBai = false
      this.show = false
      this.xieGang = false
    },
    // 键盘 删除操作
    deleNum () {
      // 血压 左边框
      if (this.inputLeftNum.length > 0 && this.flag === 1) {
        if (this.inputLeftNum.length > 3) {
          this.inputRight()
        } else {
          this.inputLeft()
        }
        this.inputLeftNum.pop()
        this.inputLeftText = this.inputLeftText.substring(0, this.inputLeftText.length - 1)
      } else if (this.inputRightNum.length > 0 && this.flag === 2) { // 血压右边框
        this.inputRight()
        this.inputRightNum.pop()
        this.inputRightText = this.inputRightText.substring(0, this.inputRightText.length - 1)
      } else if (this.num.length > 0 && this.numText.length > 0) { //
        this.num.pop()
        this.numText = this.numText.substring(0, this.numText.length - 1)
      } else {
        this.numText = this.NoText
        if (this.numText / 1 === 0) {
          this.kongBaiColor = false
          this.showColor = false
        } else if (this.inputLeftText / 1 === 0 && this.inputRightText / 1 === 0) {
          this.xieGangColor = false
        }
        Toast('请输入数字')
      }
    },
    formatDate (date, today) {
      var YY = date.getFullYear() + '/'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '  '
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      if (new Date()) {
        return '今天' + ' ' + hh + mm
      } else if (today === 1) {
        return MM + DD + '(今天)'
      } else {
        return YY + MM + DD + hh + mm
      }
    }
  }
}
</script>

<style scoped>
  input:focus{
    /*border: 1px solid #1da3f2;*/
    border: 2px solid #1DA4F2;
  }
  .inputText{
    width: 11vw;
    height: 7vw;
    font-size: 5vw;
    border: 1px solid #999999;
    border-radius: 5px;
    text-align: center;
    color: #1da3f2;
  }
  /deep/ .textNull{
    color: #999 !important;
    font-size: 5vw;
  }
  /deep/ .textNull span{
    color: #999 !important;
    font-size: 6vw;
  }
  /deep/ .text span{
    color: #1DA3F2;
    font-size: 6vw;
  }
  /deep/ .unitClass span{
    font-size: 3vw;
  }
/deep/ .van-grid-item__text {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
/deep/ .van-picker__toolbar{
  margin-bottom: 10vw;
  border-bottom: 1px solid #c7c7cb;
}
  /*更改键盘字体大小*/
  /deep/  .van-grid-item__content--center{
    font-size: 18px;
    display: flex;
    flex-direction: row;
  }
  /deep/ .define{
    color: #1da3f2;
  }
  /deep/ .van-image__img{
    width: auto !important;
  }
  /deep/ .keyboard .keyback .van-grid-item__content--center{
    background: #E5E5E5;
  }
  /deep/ .keyboard .van-grid-item__content--center{
    border: 1px solid rgb(200, 199, 204);
  }
</style>
